<template>
	<view class="container">
		<!-- <view class="item">
			<u-input v-model="realName" border="none" placeholder="昵称">
				<u-text
					text="昵称"
					slot="prefix"
					margin="0 10rpx 0 0"
				></u-text>
			</u-input>
		</view> -->
		<!-- <view class="avatar_a">
			<view class="avatar">
				 
			</view>
		</view> -->
		<okingtz-cropper :image='realName' @uploadSuccess="uploadSuccess"></okingtz-cropper>
		<!-- <view class="submit_btn">
			<u-button @click="save"  type="primary" shape="circle" text="上传头像"></u-button>
		</view> -->
	</view> 
</template>

<script>
import { updateUserInfo , upLoadImage } from '@/api/user.js'
export default {
	data() {
		return {
			realName: '',
			image:'',
			text: '无头像'
		};
	},
	onShow() {
		this.realName = uni.getStorageSync('userInfo').avatar
	},
	methods:{ 
		uploadSuccess(tempFilePath){
			// 4.根据自己的业务场景处理tempFilePath ;接口保存，或者上传至云空间
			uni.uploadFile({
			  url: 'https://iot.wehcatapp.zhongtuodianshang.cn/api/v1/images', // 上传服务器的URL
			  filePath: tempFilePath,
			  name: 'image', // 上传文件对应的 key
			  // formData:{
				 // image: tempFilePath
			  // },
			  header:{
				  'Authorization': 'Bearer ' + uni.getStorageSync('token')
			  },
			  success: (uploadFileRes) => {  
				this.realName = JSON.parse(uploadFileRes.data).data.path
			 //    // 如果服务器返回了文件存储路径或其他相关信息，可以进行处理
				updateUserInfo({avatar:this.realName}).then(res => {
					if(res.status == 200){
						uni.setStorageSync('userInfo',res.data)
						uni.showToast({
							title:res.message
						})
						setTimeout(() => {
							uni.navigateBack()
						},1000)
					}
				})
			  },
			  fail: (error) => {
			    console.error(error);
			  }
			});
        },
		save(){
			updateUserInfo({avatar:this.realName}).then(res => {
				if(res.status == 200){
					uni.setStorageSync('userInfo',res.data)
					uni.showToast({
						title:res.message
					})
					setTimeout(() => {
						uni.navigateBack()
					},1000)
				}
			})
		}
	}
};
</script>

<style lang="scss" >
	page{
		background-color:#f8f8f8 ;
	}
</style>
<style lang="scss" scoped>
	.avatar_a{
		width: 100vw;
		height: 300rpx;
		.avatar{
			width: 300rpx;
			height: 300rpx;
			border-radius: 50%;
			margin: 30rpx auto;
			background: #000;
		}
	}
	.container{
		.item{
			background-color: #fff;
			padding: 20rpx 30rpx;
			margin: 20rpx 0;
		}
		.submit_btn{
			padding:  30rpx ;
		}
	}
</style>
